<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { getRefineryAllocations, tankChart } from '@/api/plan/plan'

const animationDuration = 3000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')


      // 获取数据
      getRefineryAllocations().then(response => {
        const refineryData = response.data;
        // const refineryData = [
        //   { refineryId: 1, refineryName: 'Refinery A', totalAllocation: 5000, totalSendWeight: 7000, totalSendCarCount: 12000 },
        //   { refineryId: 2, refineryName: 'Refinery B', totalAllocation: 4000, totalSendWeight: 9000, totalSendCarCount: 15000 },
        //   { refineryId: 3, refineryName: 'Refinery C', totalAllocation: 5500, totalSendWeight: 11000, totalSendCarCount: 12000 },
        // ];

// Prepare the data in the required format
        const data = response.data.map(refinery => ({
          name: refinery.refineryName,
          value: [
            refinery.totalAllocation,
            refinery.totalSendWeight,
            refinery.totalSendCarCount
          ]
        }));

        const names = response.data.map(refinery => refinery.refineryName);
// Calculate maximum values for each metric
        const maxTotalAllocation = Math.max(...refineryData.map(refinery => refinery.totalAllocation));
        const maxTotalSendWeight = Math.max(...refineryData.map(refinery => refinery.totalSendWeight));
        const maxTotalSendCarCount = Math.max(...refineryData.map(refinery => refinery.totalSendCarCount));

// Create the indicators array
        const indicator = [
          { name: '分配量', max: maxTotalAllocation },
          { name: '已发量', max: maxTotalSendWeight },
          { name: '已发车数量', max: maxTotalSendCarCount },
        ];
        // 处理返回的数据，构建图表需要的格式
        const chartData = this.rData
        this.chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          radar: {
            radius: '66%',
            center: ['50%', '42%'],
            splitNumber: 8,
            splitArea: {
              areaStyle: {
                color: 'rgba(127,95,132,.3)',
                opacity: 1,
                shadowBlur: 45,
                shadowColor: 'rgba(0,0,0,.5)',
                shadowOffsetX: 0,
                shadowOffsetY: 15
              }
            },
            indicator: indicator||[
              { name: '分配量', max: 110 },
              { name: '已发量', max: 10 },
              { name: '已发车数量', max: 5 },
            ]
          },
          legend: {
            left: 'center',
            bottom: '10',
            data: names||['Allocated Budget', 'Expected Spending', 'Actual Spending']
          },
          series: [{
            type: 'radar',
            symbolSize: 0,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: 'rgba(0,0,0,.2)',
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1
              }
            },
            data:data|| [
              {
                value: [5000, 7000, 12000,],
                name: 'Allocated Budget'
              },
              {
                value: [4000, 9000, 15000, ],
                name: 'Expected Spending'
              },
              {
                value: [5500, 11000, 12000, ],
                name: 'Actual Spending'
              }
            ],
            animationDuration: animationDuration
          }]
        })

      }).catch(error => {
        console.error('获取数据失败:', error);
      });



    }
  }
}
</script>
